<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理系统</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>商品管理系统</h1>
        
        <!-- 商品类型管理 -->
        <div class="section">
            <h2>商品类型管理</h2>
            <div class="type-actions">
                <button id="showTypeFormBtn">添加类型</button>
                <div id="addTypeForm" class="form-container" style="display:none;">
                    <h3>添加新类型</h3>
                    <form id="typeForm">
                        <div class="form-group">
                            <label for="typeName">类型名称:</label>
                            <input type="text" id="typeName" required>
                        </div>
                        <div class="form-group">
                            <label for="typeDesc">描述:</label>
                            <textarea id="typeDesc"></textarea>
                        </div>
                        <div class="form-actions">
                            <button type="submit">保存</button>
                            <button type="button" id="cancelTypeBtn">取消</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="type-list">
                <table id="typeTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>类型名称</th>
                            <th>描述</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                        </tr>
                    </thead>
                    <tbody id="typeTableBody">
                        <!-- 类型数据将通过JS动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 商品管理 -->
        <div class="section">
            <h2>商品管理</h2>
            <div class="add-product">
                <button id="showAddFormBtn">添加商品</button>
                <div id="addProductForm" class="form-container" style="display:none;">
                    <h3>添加新商品</h3>
                    <form id="productForm" enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="productName">商品名称:</label>
                            <input type="text" id="productName" required>
                        </div>
                        <div class="form-group">
                            <label for="productType">商品类型:</label>
                            <select id="productType" required>
                                <!-- 商品类型将通过JS动态加载 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="productPrice">价格:</label>
                            <input type="number" id="productPrice" min="0" step="0.01" required>
                        </div>
                        <div class="form-group">
                            <label for="productStock">库存:</label>
                            <input type="number" id="productStock" min="0" required>
                        </div>
                        <div class="form-group">
                            <label for="productStatus">状态:</label>
                            <select id="productStatus">
                                <option value="active">上架</option>
                                <option value="inactive">下架</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="productImageFile">商品图片:</label>
                            <input type="file" id="productImageFile" name="image" accept="image/*">
                            <div id="imagePreview" class="image-preview"></div>
                        </div>
                        <div class="form-group">
                            <label for="productDesc">描述:</label>
                            <textarea id="productDesc"></textarea>
                        </div>
                        <div class="form-actions">
                            <button type="submit">保存</button>
                            <button type="button" id="cancelAddBtn">取消</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 搜索框 -->
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="输入商品名称搜索...">
                <button id="searchBtn">搜索</button>
                <button id="resetBtn">重置</button>
            </div>
            
            <!-- 商品列表 -->
            <div class="product-list">
                <table id="productTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>商品名称</th>
                            <th>类型</th>
                            <th>价格</th>
                            <th>库存</th>
                            <th>图片</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="productTableBody">
                        <!-- 商品数据将通过JS动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 加载提示 -->
        <div id="loading" class="loading">加载中...</div>
        
        <!-- 图片预览模态框 -->
        <div id="imageModal" class="modal">
            <span class="close">&times;</span>
            <img class="modal-content" id="modalImage">
            <div id="caption"></div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>